<template>
    <div class="content-card" :class="cls">
        <div class="hat"><img src="@/assets/hat.png" alt=""></div>
          <div class="txt">
            <div class="title">
              <span>{{ item.title }}</span>
            </div>
            <div class="info">
                <div class="num">
                    <img src="@/assets/star.png" alt="">
                    <span>{{ item.credits }}</span>
                </div>
                <div class="num">
                    <img src="@/assets/clock.png" alt="">                
                    <span>{{item.duration}}</span>
                </div>
            </div>
          
          </div>
          <div class="img">
            <img :src="item.image1" alt="">
          </div>
        
      </div>
</template>
<script setup>
 import {defineProps } from "vue";
    const props = defineProps({
    item: {
        type: Object,
        default: {}
    },
    cls: {
        type: String,
        default: ''
    },
    });
</script>
<style lang='scss' scoped>
     .content-card {
        background: #414055;
        border-radius: 0px 10px 0px 10px;
      height: 329px;
      cursor: pointer;
      transition: all 0.3s ease;
      overflow: hidden;
       &.active{
             border: 2px solid RGBA(227, 66, 52, 1);
            
        }
      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
      }
      .hat{
        margin: 20px 20px 0;
        img{
            width: 36px;
            height: 36px;
            vertical-align: middle;
        }
      }
      .txt{
        padding: 8px 20px 0;
        width: 100%;
        .title{
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 18px;
            color: #FFFFFF;
            line-height: 24px;
            height: 50px;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            display: -webkit-box;
            -webkit-line-clamp: 2;
        }
        .info{
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .num{           
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 16px;
            color: #FFFFFF;
            line-height: 16px;
            display: flex;
            align-items: center;
            img{
                width: 14px;
                height: 14px;
                margin-right: 5px;
                vertical-align: middle;
            }
        }
        
      }
      .img{
            width: 100%;
            height: 177px;
            border-radius: 0px 10px 0 10px;
            margin-top: 22px;
            img{
                width: 100%;
                height: 100%;
                border-radius: 0px 10px 0 10px;
                vertical-align: middle;
            }
        }
    }            
</style>